<template>
  <!-- 内容区域主容器 -->
  <div class="content-area">
    <!-- 内容容器，用于包裹所有页面内容 -->
    <div class="content-container">
      <!-- 默认首页内容 -->
      <div v-if="currentPage === 'home'" class="page-content home-content">
        <!-- 英雄区域，展示主要标题和按钮 -->
        <div class="hero-section">
          <!-- 主标题 -->
          <h1 class="hero-title">欢迎来到崩坏3世界</h1>
          <!-- 副标题 -->
          <p class="hero-subtitle">体验最震撼的3D动作游戏</p>
          <!-- 英雄按钮组 -->
          <div class="hero-buttons" src="https://www.bh3.com/">
            <!-- 主要操作按钮 -->
            <button class="primary-btn">立即游戏</button>
          </div>
        </div>
        
        <!-- 功能特性网格布局 -->
        <div class="features-grid">
          <!-- 视听中心功能卡片 -->
          <div class="feature-card" @click="navigateToMedia">
            <!-- 功能图标 -->
            <div class="feature-icon">🎮</div>
            <!-- 功能标题 -->
            <h3>视听中心</h3>
            <!-- 功能描述 -->
            <p>精彩视频与音乐体验</p>
          </div>
          <!-- 角色功能卡片 -->
          <div class="feature-card" @click="navigateToCharacter">
            <!-- 功能图标 -->
            <div class="feature-icon">👥</div>
            <!-- 功能标题 -->
            <h3>丰富角色</h3>
            <!-- 功能描述 -->
            <p>多样化的女武神角色</p>
          </div>
          <!-- 舞台功能卡片 -->
          <div class="feature-card" @click="navigateToStage">
            <!-- 功能图标 -->
            <div class="feature-icon">🌟</div>
            <!-- 功能标题 -->
            <h3>精美画面</h3>
            <!-- 功能描述 -->
            <p>顶级3D渲染技术</p>
          </div>
        </div>
      </div>
      
      <!-- 新闻页面内容 -->
      <div v-else-if="currentPage === 'news'" class="page-content news-content">
        <!-- 新闻详情组件，当显示新闻详情时渲染 -->
        <NewsDetail 
          v-if="showNewsDetail"
          :article="currentNewsArticle"
          :allArticles="allNewsArticles"
          @go-back="goBackToNewsList"
          @view-article="viewNewsArticle"
        />
        <!-- 新闻列表页面组件，默认显示 -->
        <NewsPage 
          v-else
          @show-detail="showNewsDetailHandler"
        />
      </div>
      
      <!-- 角色页面内容，使用全屏样式 -->
      <div v-else-if="currentPage === 'character'" class="page-content character-content fullscreen-content">
        <!-- 英雄页面组件 -->
        <HeroPage />
      </div>
      
      <!-- 舞台页面内容 -->
      <div v-else-if="currentPage === 'stage'" class="page-content stage-content">
        <!-- 场景页面组件 -->
        <ScenePage />
      </div>
      
      <!-- 视听中心页面内容 -->
      <div v-else-if="currentPage === 'media'" class="page-content media-content">
        <!-- 媒体页面头部区域 -->
        <div class="media-header">
          <!-- 媒体页面Logo展示 -->
          <div class="media-logo">
            <img src="https://fastcdn.mihoyo.com/mi18n/bh3_cn/m20230317hy14h0glc0/upload/fa04b7462dcee3e717720a0f22485dd6_8521031719796373241.png" alt="视听中心" />
          </div>
       
        </div>
        
        <!-- 媒体页面主要布局容器 -->
        <div class="media-layout">
          <!-- 主要内容区域，包含视频和侧边栏 -->
          <div class="media-main">
            <!-- 视频播放区域 -->
            <div class="media-section video-section">
              <!-- 视频区域内容容器 -->
              <div class="section-content">
                <!-- 主视频播放器区域 -->
                <div class="main-video">
                  <!-- 视频播放器容器 -->
                  <div class="video-container">
                    <!-- HTML5视频播放器元素 -->
                    <video 
                      ref="mainVideoPlayer"
                      class="video-player" 
                      :src="currentVideo ? currentVideo.url : ''"
                      :poster="'https://uploadstatic.mihoyo.com/contentweb/20210517/2021051715152250556.jpg?x-oss-process=image/resize,w_475'"
                      @click="playMainVideo"
                    ></video>
                    <!-- 视频封面遮罩层，当视频未播放时显示播放按钮 -->
                    <div 
                      v-if="!isMainVideoPlaying" 
                      class="video-poster-overlay"
                      @click="playMainVideo"
                    >
                      <!-- 主播放按钮容器 -->
                      <div class="main-play-button">
                        <!-- 播放图标 -->
                        <div class="play-icon-large">▶</div>
                      </div>
                    </div>
                  </div>
                  <!-- 视频信息展示区域 -->
                  <div class="video-info">
                    <!-- 视频标题 -->
                    <h3>{{ currentVideo ? currentVideo.title : '' }}</h3>
                    <!-- 视频描述 -->
                    <p>{{ currentVideo ? currentVideo.description : '' }}</p>
                  </div>
                </div>
                <!-- 视频缩略图列表，用于切换不同视频 -->
                <div class="video-list">
                  <!-- 遍历视频列表生成缩略图 -->
                  <div 
                    v-for="(video, index) in videoList" 
                    :key="index"
                    class="video-thumbnail"
                    :class="{ active: currentVideoIndex === index }"
                    @click="switchVideo(index)"
                  >
                    <!-- 缩略图海报图片 -->
                    <img 
                      class="thumbnail-poster"
                      :src="video.poster"
                      :alt="video.title"
                    />
                    <!-- 缩略图遮罩层，hover时显示播放图标 -->
                    <div class="thumbnail-overlay">
                      <!-- 小播放图标 -->
                      <div class="play-icon">▶</div>
                    </div>
                  </div>
                </div>
                <!-- 视频区域标签 -->
                <div class="video-label">视频</div>
              </div>
            </div>
            
            <!-- 右侧边栏内容区域 -->
            <div class="media-sidebar">
              <!-- 漫画展示区域 -->
              <div class="media-section manga-section">
                <!-- 漫画区域内容容器 -->
                <div class="section-content">
                  <!-- 漫画项目，点击跳转到官方漫画网站 -->
                  <div class="manga-item" @click="goToComicSite">
                    <!-- 漫画预览图片 -->
                    <img 
                      class="manga-image"
                      src="https://fastcdn.mihoyo.com/content-v2/bh3/122054/c22fec52389366241a87bc2d1748de0a_4456626538822130360.jpg"
                      alt="崩坏3漫画"
                    />
                    <!-- 漫画遮罩层，hover时显示文字 -->
                    <div class="manga-overlay">
                      <!-- 漫画提示文本 -->
                      <div class="manga-text">阅读漫画</div>
                    </div>
                  </div>
                  <!-- 漫画区域标签 -->
                  <div class="section-label">漫画</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 用户管理页面内容 -->
      <div v-else-if="currentPage === 'user-management'" class="page-content user-management-content">
        <!-- 用户管理组件 -->
        <UserManagement />
      </div>
      
      <!-- 英雄管理页面内容 -->
      <div v-else-if="currentPage === 'hero-management'" class="page-content hero-management-content">
        <!-- 英雄管理组件 -->
        <HeroManagement />
      </div>
      
      <!-- 武器展示页面内容 -->
        <div v-else-if="currentPage === 'weapon'" class="page-content weapon-content">
          <!-- 武器展示组件 -->
          <WeaponDisplay />
        </div>
        

    </div>
  </div>
</template>

<script>
// 导入子组件
import UserManagement from './UserManagement.vue'  // 用户管理组件
import HeroManagement from './HeroManagement.vue'  // 英雄管理组件
import WeaponPage from './WeaponPage.vue'          // 武器页面组件
import WeaponDisplay from './WeaponDisplay.vue'    // 武器展示组件
import NewsPage from './NewsPage.vue'              // 新闻页面组件
import NewsDetail from './NewsDetail.vue'          // 新闻详情组件
import HeroPage from './HeroPage.vue'              // 英雄页面组件
import ScenePage from './ScenePage.vue'            // 场景页面组件
import { useUserStore } from '../stores/user'      // 用户状态管理

export default {
  name: 'ContentArea',  // 组件名称
  
  // 注册子组件
  components: {
    UserManagement,   // 用户管理
    HeroManagement,   // 英雄管理
    WeaponPage,       // 武器页面
    WeaponDisplay,    // 武器展示
    NewsPage,         // 新闻页面
    NewsDetail,       // 新闻详情
    HeroPage,         // 英雄页面
    ScenePage         // 场景页面
  },
  
  // 组件属性定义
  props: {
    /**
     * 初始页面类型
     * @type {String}
     * @default 'home'
     * @description 组件初始化时显示的页面类型
     */
    initialPage: {
      type: String,
      default: 'home'
    }
  },
  
  // 组件数据
  data() {
    return {
      // 页面状态管理
      currentPage: this.initialPage,        // 当前显示的页面类型
      
      // 新闻相关状态
      showNewsDetail: false,                // 是否显示新闻详情页
      currentNewsArticle: null,             // 当前查看的新闻文章
      allNewsArticles: [],                  // 所有新闻文章列表
      
      // 视频播放相关状态
      currentVideo: null,                   // 当前播放的视频对象
      isMainVideoPlaying: false,            // 主视频是否正在播放
      currentVideoIndex: 0,                 // 当前视频在列表中的索引
      
      /**
       * 视频列表数据
       * @type {Array}
       * @description 包含所有可播放视频的信息，每个视频对象包含标题、描述、URL和封面图
       */
      videoList: [
        {
          title: '崩坏3 — 最新宣传视频',
          description: '精彩内容抢先看！',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2025/03/26/76321978/b4a4ece87a2000363c936660842dd843_2674802955786817534.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/126674/07b3ff4b33bc634fe72cfd6cf26331cc_6155138484885745843.png'
        },
        {
          title: '崩坏3 — 版本更新预告',
          description: '全新版本内容揭晓。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2025/01/20/76321978/03db0f5fc03255d45096d871fe5df86e_1093835533746303409.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/126673/15849fc85faed63d96d542282717250a_6270630448277626690.png'
        },
        {
          title: '崩坏3 — 角色展示',
          description: '全新角色登场亮相。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/12/17/76321978/9ce0ad1ddcd2cdd1ab7717265346a5e3_8790559258450056518.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/125982/29c59c1e94215affe24daee405ef54c5_2974114339775085989.png'
        },
        {
          title: '崩坏3 — 战斗演示',
          description: '激烈战斗场面展示。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/10/30/76321978/141c00735e5a0a85fe49015cf94369dd_6857929408257596188.mp4',
          poster: 'https://fastcdn.mihoyo.com/content-v2/bh3/127351/a3734f77846f906a99dc0aa739ab6ae9_1085305199320833304.png'
        },
        {
          title: '崩坏3 — 剧情预览',
          description: '精彩剧情内容预告。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/09/27/76321978/aa07605d621d7dd50f3023103c04a07e_2769588059308576112.mp4',
          poster: 'https://uploadstatic.mihoyo.com/contentweb/20220126/2022012620363380030.png?x-oss-process=image/resize,w_475'
        },
        {
          title: '崩坏3 — 活动宣传',
          description: '限时活动火热进行中。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/08/05/76321978/730e07998de13f2bf4bff4eb7e84cb88_8429380101310045696.mp4',
          poster: 'https://webstatic.mihoyo.com/upload/contentweb/2022/04/20/aa7fdd276ad848d02f28f7f86264d386_4205942631348108574.jpg?x-oss-process=image/resize,w_475'
        },
        {
          title: '崩坏3 — 特别企划',
          description: '特别制作内容放送。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/08/05/76321978/7f20d5dead5b20170429a017674ec115_5474569515951020103.mp4',
          poster: 'https://uploadstatic.mihoyo.com/contentweb/20210517/2021051715152250556.jpg?x-oss-process=image/resize,w_475'
        },
        {
          title: '崩坏3 — 经典回顾',
          description: '经典内容重温回顾。',
          url: 'https://act-upload.mihoyo.com/bh3-wiki/2024/05/16/76321978/11445f251feb8081e42fe20d043c92bd_1613543613873844214.mp4',
          poster: 'https://uploadstatic.mihoyo.com/contentweb/20211015/2021101519555911370.png?x-oss-process=image/resize,w_475'
        }
      ],
      
      // 用户状态管理实例
      userStore: useUserStore()
    }
  },
  
  // 监听器
  watch: {
    /**
     * 监听初始页面属性变化
     * @param {String} newPage - 新的页面类型
     * @description 当父组件传入的初始页面发生变化时，更新当前页面
     */
    initialPage(newPage) {
      this.currentPage = newPage
    }
  },
  
  // 组件挂载后的生命周期钩子
  mounted() {
    // 初始化媒体页当前视频
    if (this.videoList && this.videoList.length > 0) {
      this.currentVideoIndex = 0
      this.currentVideo = this.videoList[0]
      this.isMainVideoPlaying = false
    }
  },
  
  // 组件销毁前的生命周期钩子
  beforeUnmount() {
    // 页面销毁时中止视频播放，防止内存泄漏
    const player = this.$refs?.mainVideoPlayer
    if (player && typeof player.pause === 'function') {
      try { 
        player.pause() 
      } catch (e) { 
        /* 忽略暂停失败的错误 */ 
      }
    }
  },
  
  // 组件方法
  methods: {
    // ==================== 新闻相关方法 ====================
    
    /**
     * 显示新闻详情处理器
     * @param {Object} article - 新闻文章对象
     * @description 设置当前新闻文章并显示详情页面
     */
    showNewsDetailHandler(article) {
      this.currentNewsArticle = article
      this.showNewsDetail = true
      this.getAllNewsArticles()
    },
    
    /**
     * 返回新闻列表
     * @description 隐藏新闻详情页面，返回到新闻列表
     */
    goBackToNewsList() {
      this.showNewsDetail = false
      this.currentNewsArticle = null
    },
    
    /**
     * 查看新闻文章
     * @param {Object} article - 新闻文章对象
     * @description 切换到指定的新闻文章并滚动到页面顶部
     */
    viewNewsArticle(article) {
      this.currentNewsArticle = article
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    /**
     * 获取所有新闻文章
     * @description 模拟获取新闻数据，实际项目中应该从API获取
     */
    getAllNewsArticles() {
      const newsData = {
        latest: [
          {
            id: 1,
            title: '淬星激斗｜参与活动获取水晶、根源接缘等奖励！',
            summary: '一人选战，三人协攻，在深邃的星光下战斗不休！',
            image: 'https://fastcdn.mihoyo.com/content-v2/bh3/157811/92333adce61e1a9e75591e2741dcfd97_7957877470594159892.png',
            date: '2025/01/31',
            category: 'events',
            tags: ['活动', '奖励', '水晶']
          }
        ]
      }
      this.allNewsArticles = Object.values(newsData).flat()
    },
    
    // ==================== 视频播放相关方法 ====================
    
    /**
     * 播放或暂停主视频
     * @description 控制主视频播放器的播放/暂停状态
     */
    playMainVideo() {
      const player = this.$refs?.mainVideoPlayer
      if (!player) return
      
      if (player.paused) {
        player.play()
        this.isMainVideoPlaying = true
      } else {
        player.pause()
        this.isMainVideoPlaying = false
      }
    },
    
    /**
     * 切换主视频
     * @param {Number} index - 视频在列表中的索引
     * @description 切换到指定索引的视频并自动播放
     */
    switchVideo(index) {
      if (!this.videoList || index < 0 || index >= this.videoList.length) return
      
      this.currentVideoIndex = index
      this.currentVideo = this.videoList[index]
      
      // 切换后自动播放视频
      const player = this.$refs?.mainVideoPlayer
      if (player) {
        try { 
          player.pause()
          // 等待视频源更新后自动播放
          this.$nextTick(() => {
            player.load()
            player.play().then(() => {
              this.isMainVideoPlaying = true
            }).catch(e => {
              // 自动播放失败，需要用户手动点击播放
              this.isMainVideoPlaying = false
            })
          })
        } catch (e) {
          this.isMainVideoPlaying = false
        }
      }
    },
    
    // ==================== 页面导航相关方法 ====================
    
    /**
     * 前往官方漫画站
     * @description 在新标签页中打开官方漫画网站
     */
    goToComicSite() {
      window.open('https://comic.bh3.com/', '_blank')
    },
    
    // ==================== 首页功能卡片导航方法 ====================
    
    /**
     * 导航到视听中心
     * @description 从首页功能卡片跳转到视听中心页面
     */
    navigateToMedia() {
      this.currentPage = 'media'
      window.scrollTo({ top: 1, behavior: 'smooth' })
    },
    
    /**
     * 导航到角色页面
     * @description 从首页功能卡片跳转到角色页面
     */
    navigateToCharacter() {
      this.currentPage = 'character'
      window.scrollTo({ top: 0, behavior: 'smooth' })
    },
    
    /**
     * 导航到舞台页面
     * @description 从首页功能卡片跳转到舞台页面
     */
    navigateToStage() {
      this.currentPage = 'stage'
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
/* ==================== 基础布局样式 ==================== */

/* 内容区域主容器样式 */
.content-area {
  margin-top: 70px; /* 为顶部导航栏留出空间 */
  min-height: calc(100vh - 70px); /* 计算最小高度，减去导航栏高度 */
  padding: 40px 0; /* 上下内边距 */
}

/* 内容容器样式，限制最大宽度并居中 */
.content-container {
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 左右内边距 */
}

/* 全屏内容样式，用于需要全屏显示的页面 */
.fullscreen-content {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100vw; /* 视窗宽度 */
  height: 100vh; /* 视窗高度 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  z-index: 1000; /* 高层级显示 */
  background: rgba(0, 0, 0, 0.9); /* 半透明黑色背景 */
}

/* 页面内容淡入动画 */
.page-content {
  animation: fadeIn 0.5s ease-in-out; /* 0.5秒淡入动画 */
}

/* 淡入动画关键帧定义 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 起始透明度为0 */
    transform: translateY(20px); /* 起始位置向下偏移20px */
  }
  to {
    opacity: 1; /* 结束透明度为1 */
    transform: translateY(0); /* 结束位置为原位置 */
  }
}

/* ==================== 首页样式 ==================== */

/* 英雄区域样式 */
.hero-section {
  text-align: center; /* 文本居中对齐 */
  padding: 80px 0; /* 上下内边距80px */
  margin-bottom: 60px; /* 底部外边距60px */
}

/* 主标题样式 */
.hero-title {
  font-size: 3.5rem; /* 字体大小3.5rem */
  font-weight: bold; /* 粗体字重 */
  color: #fff; /* 白色文字 */
  margin-bottom: 20px; /* 底部外边距20px */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); /* 45度渐变背景 */
  -webkit-background-clip: text; /* WebKit文字裁剪 */
  -webkit-text-fill-color: transparent; /* WebKit文字填充透明 */
  background-clip: text; /* 标准文字裁剪 */
  text-shadow: 0 0 30px rgba(255, 107, 107, 0.3); /* 文字阴影效果 */
}

/* 副标题样式 */
.hero-subtitle {
  font-size: 1.5rem; /* 字体大小1.5rem */
  color: rgba(255, 255, 255, 0.8); /* 半透明白色文字 */
  margin-bottom: 40px; /* 底部外边距40px */
}

/* 英雄按钮组样式 */
.hero-buttons {
  display: flex; /* 弹性布局 */
  gap: 20px; /* 按钮间距20px */
  justify-content: center; /* 水平居中对齐 */
}

/* 主要按钮和次要按钮通用样式 */
.primary-btn,
.secondary-btn {
  padding: 15px 30px; /* 内边距15px上下，30px左右 */
  border: none; /* 无边框 */
  border-radius: 25px; /* 圆角25px */
  font-size: 16px; /* 字体大小16px */
  font-weight: 600; /* 字重600 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
}

/* 主要按钮样式 */
.primary-btn {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 45度渐变背景 */
  color: #fff; /* 白色文字 */
}

/* 主要按钮悬停效果 */
.primary-btn:hover {
  transform: translateY(-3px); /* 向上移动3px */
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4); /* 阴影效果 */
}

/* 次要按钮样式 */
.secondary-btn {
  background: transparent; /* 透明背景 */
  color: #fff; /* 白色文字 */
  border: 2px solid rgba(255, 255, 255, 0.3); /* 半透明白色边框 */
}

/* 次要按钮悬停效果 */
.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  border-color: #fff; /* 白色边框 */
}

/* 功能特性网格布局 */
.features-grid {
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应网格列，最小300px */
  gap: 30px; /* 网格间距30px */
  margin-top: 60px; /* 顶部外边距60px */
}

/* 功能卡片样式 */
.feature-card {
  background: rgba(0, 0, 0, 0.5); /* 透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.feature-card p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* 通用页面样式 */
.page-title {
  font-size: 2.5rem;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 新闻页面样式 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-item {
  display: flex;
  background: rgba(5, 5, 5, 0.05);
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease;
}

.news-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(10px);
}

.news-image {
  width: 120px;
  height: 80px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 10px;
  margin-right: 20px;
}

.news-info h3 {
  color: #050505;
  margin-bottom: 10px;
}

.news-info p {
  color: rgba(2, 2, 2, 0.7);
  margin-bottom: 10px;
}

.news-date {
  color: rgba(3, 3, 3, 0.5);
  font-size: 0.9rem;
}

/* 角色页面样式 */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.character-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.character-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
}

.character-avatar {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 50%;
  margin: 0 auto 20px;
}

.character-card h3 {
  color: #fff;
  margin-bottom: 10px;
}

.character-card p {
  color: rgba(255, 255, 255, 0.7);
}

/* 舞台和媒体页面样式 */
.stage-gallery,
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.stage-item,
.media-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px;
  transition: all 0.3s ease;
}

.stage-item:hover,
.media-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
}

.stage-image,
.media-thumbnail {
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 10px;
  margin-bottom: 15px;
}

.stage-item h3,
.media-item h3 {
  color: #fff;
  text-align: center;
}

/* 用户管理页面样式 */
.user-management-content {
  padding: 0;
  margin: 0;
}

.user-management-content .user-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 英雄管理页面样式 */
.hero-management-content {
  padding: 0;
  margin: 0;
}

.hero-management-content .hero-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 场景管理页面样式 */
.scene-management-content {
  padding: 0;
  margin: 0;
}

.scene-management-content .scene-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 武器页面样式 */
.weapon-content {
  padding: 0;
  margin: 0;
}

.weapon-content .weapon-page {
  margin-top: -40px;
  padding-top: 0;
}



/* 技能管理页面样式 */
.skill-management-content {
  padding: 0;
  margin: 0;
}

.skill-management-content .skill-management {
  margin-top: -40px;
  padding-top: 0;
}

/* 个人中心页面样式 */
.profile-content {
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  margin: 20px;
  min-height: calc(100vh - 200px);
}

.profile-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* 媒体标签 */
.media-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 10px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* ==================== 新版视听中心页面样式 ==================== */

/* 媒体页面内容容器 */
.media-content {
  padding: 0; /* 清除内边距 */
  max-width: none; /* 不限制最大宽度 */
}

/* 媒体页面头部区域 */
.media-header {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 20px 60px; /* 内边距20px上下，60px左右 */
  background: transparent; /* 透明背景 */
  border-bottom: 1px solid rgba(255,255,255,0.1); /* 底部边框 */
}

/* 媒体页面Logo区域 */
.media-logo {
  margin-right: 30px; /* 右侧外边距30px */
}

/* 媒体页面Logo图片 */
.media-logo img {
  height: 80px; /* 高度80px */
  width: auto; /* 宽度自适应 */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); /* 阴影滤镜效果 */
}

/* 媒体页面标题 */
.media-title {
  color: #fff; /* 白色文字 */
  font-size: 3rem; /* 字体大小3rem */
  font-weight: bold; /* 粗体字重 */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 文字阴影效果 */
  margin: 0; /* 清除外边距 */
}

/* 媒体页面布局容器 */
.media-layout {
  padding: 30px 60px 60px; /* 内边距30px顶部，60px左右，60px底部 */
}

/* 媒体页面主要内容区域 */
.media-main {
  display: grid; /* 网格布局 */
  grid-template-columns: 2fr 1fr; /* 两列布局，左侧2份，右侧1份 */
  gap: 40px; /* 网格间距40px */
  height: 600px; /* 固定高度600px */
}

/* 媒体区域通用样式 */
.media-section {
  position: relative; /* 相对定位 */
  border-radius: 20px; /* 圆角边框20px */
  overflow: hidden; /* 隐藏溢出内容 */
  background: transparent; /* 透明背景 */
  border: 1px solid rgba(255,255,255,0.2); /* 半透明白色边框 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
}

/* 媒体区域悬停效果 */
.media-section:hover {
  transform: translateY(-5px); /* 向上移动5px */
  box-shadow: transparent; /* 透明阴影 */
}

/* 区域内容容器 */
.section-content {
  position: relative; /* 相对定位 */
  height: 100%; /* 占满父容器高度 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直方向排列 */
}

/* 视频区域样式 */
.video-section {
  background: transparent; /* 透明背景 */
}

/* 主视频播放器容器 */
.main-video {
    position: relative; /* 相对定位 */
    width: 100%; /* 占满父容器宽度 */
    padding-top: 56.25%; /* 16:9宽高比 */ 
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%); /* 135度渐变背景 */
    border-radius: 15px; /* 圆角边框15px */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 阴影效果 */
    backdrop-filter: blur(10px); /* 背景模糊滤镜 */
    transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
  }

  /* 视频播放器元素 */
  .video-player {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 占满父容器宽度 */
    height: 100%; /* 占满父容器高度 */
    object-fit: cover; /* 保持宽高比覆盖容器 */
    border-radius: 15px; /* 圆角边框15px */
  }

/* 视频信息标题 */
.video-info h3 {
  color: #fff; /* 白色文字 */
  font-size: 1.5rem; /* 字体大小1.5rem */
  margin: 0 0 10px 0; /* 外边距，仅底部10px */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 文字阴影效果 */
}

/* 视频信息描述 */
.video-info p {
  color: rgba(255,255,255,0.9); /* 半透明白色文字 */
  margin: 0; /* 清除外边距 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 文字阴影效果 */
}

/* 视频区域标签 */
.video-label {
  position: absolute; /* 绝对定位 */
  bottom: 20px; /* 距离底部20px */
  right: 20px; /* 距离右侧20px */
  background: rgba(255,255,255,0.9); /* 半透明白色背景 */
  color: #333; /* 深色文字 */
  padding: 8px 16px; /* 内边距8px上下，16px左右 */
  border-radius: 20px; /* 圆角边框20px */
  font-weight: bold; /* 粗体字重 */
  font-size: 0.9rem; /* 字体大小0.9rem */
}

/* 右侧边栏样式 */
.media-sidebar {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直方向排列 */
  gap: 20px; /* 子元素间距20px */
}

/* 漫画区域样式 */
.manga-section {
  flex: 1; /* 占满剩余空间 */
  background: transparent; /* 透明背景 */
}

/* 漫画项目容器 */
.manga-item {
  padding: 20px; /* 内边距20px */
  flex: 1; /* 占满剩余空间 */
}

/* 漫画占位符样式 */
.manga-placeholder {
  width: 100%; /* 占满父容器宽度 */
  height: 100%; /* 占满父容器高度 */
  background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1)); /* 45度线性渐变背景 */
  border-radius: 15px; /* 圆角边框15px */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="manga" width="15" height="15" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="7" height="7" fill="rgba(255,255,255,0.2)"/><rect x="7" y="7" width="7" height="7" fill="rgba(255,255,255,0.2)"/></pattern></defs><rect width="100" height="100" fill="url(%23manga)"/></svg>'); /* SVG背景图案 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
}

/* 漫画占位符悬停效果 */
.manga-placeholder:hover {
  transform: scale(1.02); /* 放大1.02倍 */
  background: linear-gradient(45deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2)); /* 悬停时渐变背景 */
}

/* 分类标签样式 */
.section-label {
  position: absolute; /* 绝对定位 */
  bottom: 20px; /* 距离底部20px */
  right: 20px; /* 距离右侧20px */
  background: rgba(255,255,255,0.9); /* 半透明白色背景 */
  color: #333; /* 深色文字 */
  padding: 8px 16px; /* 内边距8px上下，16px左右 */
  border-radius: 20px; /* 圆角边框20px */
  font-weight: bold; /* 粗体字重 */
  font-size: 0.9rem; /* 字体大小0.9rem */
  backdrop-filter: blur(10px); /* 背景模糊滤镜 */
}

/* ==================== 响应式设计 ==================== */

/* 中等屏幕适配 (最大宽度1200px) */
@media (max-width: 1200px) {
  .media-main {
    grid-template-columns: 1fr; /* 单列布局 */
    height: auto; /* 高度自适应 */
  }
  
  .media-sidebar {
    flex-direction: row; /* 水平方向排列 */
  }
  
  .manga-section {
    flex: 1; /* 等分剩余空间 */
  }
}

/* 小屏幕适配 (最大宽度768px) */
@media (max-width: 768px) {
  .media-header {
    padding: 20px 30px; /* 减少内边距 */
    flex-direction: column; /* 垂直方向排列 */
    text-align: center; /* 文字居中对齐 */
  }
  
  .media-logo {
    margin-right: 0; /* 清除右侧外边距 */
    margin-bottom: 20px; /* 底部外边距20px */
  }
  
  .media-title {
    font-size: 2rem; /* 减小字体大小为2rem */
  }
  
  .media-layout {
    padding: 30px; /* 减少内边距为30px */
  }
  
  .media-sidebar {
    flex-direction: column; /* 垂直方向排列 */
  }
}

/* 标签按钮激活和悬停状态 */
.tab-btn.active,
.tab-btn:hover {
  color: #fff; /* 白色文字 */
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  border-color: #fff; /* 白色边框 */
}

/* ==================== 视频列表样式 ==================== */

/* 视频列表容器 */
.video-list {
  display: flex; /* 弹性布局 */
  gap: 10px; /* 子元素间距10px */
  padding: 20px; /* 内边距20px */
  overflow-x: auto; /* 水平滚动 */
  scrollbar-width: thin; /* 细滚动条 */
  scrollbar-color: rgba(255,255,255,0.3) transparent; /* 滚动条颜色 */
}

/* Webkit浏览器滚动条样式 */
.video-list::-webkit-scrollbar {
  height: 6px; /* 滚动条高度6px */
}

.video-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1); /* 滚动条轨道背景 */
  border-radius: 3px; /* 圆角边框3px */
}

.video-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3); /* 滚动条滑块背景 */
  border-radius: 3px; /* 圆角边框3px */
}

/* 视频缩略图容器 */
.video-thumbnail {
  position: relative; /* 相对定位 */
  width: 120px; /* 固定宽度120px */
  height: 68px; /* 固定高度68px */
  border-radius: 8px; /* 圆角边框8px */
  overflow: hidden; /* 隐藏溢出内容 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
  border: 2px solid transparent; /* 透明边框2px */
  flex-shrink: 0; /* 不收缩 */
}

/* 视频缩略图悬停效果 */
.video-thumbnail:hover {
  transform: scale(1.05); /* 放大1.05倍 */
  border-color: rgba(255,255,255,0.5); /* 半透明白色边框 */
}

/* 视频缩略图激活状态 */
.video-thumbnail.active {
  border-color: #ff6b6b; /* 红色边框 */
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.5); /* 红色阴影效果 */
}

/* 缩略图海报图片 */
.thumbnail-poster {
    width: 100%; /* 占满父容器宽度 */
    height: 100%; /* 占满父容器高度 */
    object-fit: cover; /* 保持宽高比覆盖容器 */
    border-radius: 8px; /* 圆角边框8px */
  }

/* 缩略图遮罩层 */
.thumbnail-overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 占满父容器宽度 */
  height: 100%; /* 占满父容器高度 */
  background: rgba(0,0,0,0.3); /* 半透明黑色背景 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  opacity: 0; /* 初始透明度为0 */
  transition: opacity 0.3s ease; /* 透明度0.3秒过渡动画 */
}

/* 缩略图悬停时显示遮罩层 */
.video-thumbnail:hover .thumbnail-overlay {
  opacity: 1; /* 透明度为1，完全显示 */
}

/* 播放图标样式 */
.play-icon {
  color: white; /* 白色图标 */
  font-size: 16px; /* 字体大小16px */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 文字阴影效果 */
}

/* ==================== 主视频封面样式 ==================== */

/* 视频容器 */
.video-container {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 占满父容器宽度 */
  height: 100%; /* 占满父容器高度 */
}

/* 视频海报遮罩层 */
.video-poster-overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 占满父容器宽度 */
  height: 100%; /* 占满父容器高度 */
  background: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
}

/* 视频海报遮罩层悬停效果 */
.video-poster-overlay:hover {
  background: rgba(0, 0, 0, 0.5); /* 更深的半透明黑色背景 */
}

/* 主播放按钮样式 */
.main-play-button {
  width: 80px; /* 宽度80px */
  height: 80px; /* 高度80px */
  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  border-radius: 50%; /* 圆形按钮 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

/* 主播放按钮悬停效果 */
.main-play-button:hover {
  background: rgba(255, 255, 255, 1); /* 完全不透明白色背景 */
  transform: scale(1.1); /* 放大1.1倍 */
}

/* 大播放图标样式 */
.play-icon-large {
  color: #333; /* 深色图标 */
  font-size: 32px; /* 字体大小32px */
  margin-left: 4px; /* 左侧外边距4px，用于视觉居中 */
}

/* ==================== 漫画样式 ==================== */

/* 返回按钮样式 */
.back-btn {
  padding: 12px 24px; /* 内边距12px上下，24px左右 */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* 45度渐变背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 25px; /* 圆角边框25px */
  font-size: 16px; /* 字体大小16px */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
}

/* 返回按钮悬停效果 */
.back-btn:hover {
  transform: translateY(-2px); /* 向上移动2px */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

/* ==================== 漫画样式 ==================== */

/* 漫画图片样式 */
.manga-image {
  width: 100%; /* 占满父容器宽度 */
  height: 100%; /* 占满父容器高度 */
  object-fit: cover; /* 保持宽高比覆盖容器 */
  border-radius: 8px; /* 圆角边框8px */
}

/* 漫画项目容器 */
.manga-item {
  position: relative; /* 相对定位 */
  cursor: pointer; /* 鼠标指针样式 */
  overflow: hidden; /* 隐藏溢出内容 */
  border-radius: 8px; /* 圆角边框8px */
  transition: transform 0.3s ease; /* 变换0.3秒过渡动画 */
}

/* 漫画项目悬停效果 */
.manga-item:hover {
  transform: scale(1.05); /* 放大1.05倍 */
}

/* 漫画遮罩层 */
.manga-overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 占满父容器宽度 */
  height: 100%; /* 占满父容器高度 */
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  opacity: 0; /* 初始透明度为0 */
  transition: opacity 0.3s ease; /* 透明度0.3秒过渡动画 */
}

/* 漫画项目悬停时显示遮罩层 */
.manga-item:hover .manga-overlay {
  opacity: 1; /* 透明度为1，完全显示 */
}

/* 漫画文字样式 */
.manga-text {
  color: white; /* 白色文字 */
  font-size: 16px; /* 字体大小16px */
  font-weight: bold; /* 粗体字重 */
}

/* ==================== 弹窗样式 ==================== */

/* 弹窗遮罩层 */
.modal-overlay {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 占满视口宽度 */
  height: 100%; /* 占满视口高度 */
  background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  z-index: 1000; /* 层级1000，确保在最上层 */
  backdrop-filter: blur(5px); /* 背景模糊滤镜 */
}

/* 弹窗内容容器 */
.modal-content {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); /* 135度渐变背景 */
  backdrop-filter: blur(20px); /* 背景模糊滤镜 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明白色边框 */
  border-radius: 15px; /* 圆角边框15px */
  width: 90%; /* 宽度90% */
  max-width: 500px; /* 最大宽度500px */
  max-height: 80vh; /* 最大高度80%视口高度 */
  overflow-y: auto; /* 垂直滚动 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}

/* 弹窗头部区域 */
.modal-header {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding: 20px 25px; /* 内边距20px上下，25px左右 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 底部边框 */
}

/* 弹窗标题样式 */
.modal-header h3 {
  color: white; /* 白色文字 */
  margin: 0; /* 清除外边距 */
  font-size: 1.5rem; /* 字体大小1.5rem */
}

/* 关闭按钮样式 */
.close-btn {
  background: none; /* 无背景 */
  border: none; /* 无边框 */
  color: white; /* 白色文字 */
  font-size: 24px; /* 字体大小24px */
  cursor: pointer; /* 鼠标指针样式 */
  padding: 0; /* 清除内边距 */
  width: 30px; /* 宽度30px */
  height: 30px; /* 高度30px */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  border-radius: 50%; /* 圆形按钮 */
  transition: background-color 0.3s ease; /* 背景色0.3秒过渡动画 */
}

/* 关闭按钮悬停效果 */
.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
}

/* 弹窗主体区域 */
.modal-body {
  padding: 25px; /* 内边距25px */
}

/* 表单组样式 */
.form-group {
  margin-bottom: 20px; /* 底部外边距20px */
}

/* 表单标签样式 */
.form-group label {
  display: block; /* 块级元素 */
  color: white; /* 白色文字 */
  margin-bottom: 8px; /* 底部外边距8px */
  font-weight: 500; /* 中等字重 */
}

/* 表单输入框和文本域通用样式 */
.form-input,
.form-textarea {
  width: 100%; /* 占满父容器宽度 */
  padding: 12px 15px; /* 内边距12px上下，15px左右 */
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明白色边框 */
  border-radius: 8px; /* 圆角边框8px */
  color: white; /* 白色文字 */
  font-size: 14px; /* 字体大小14px */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
  box-sizing: border-box; /* 边框盒模型 */
}

/* 表单输入框和文本域聚焦状态 */
.form-input:focus,
.form-textarea:focus {
  outline: none; /* 清除默认轮廓 */
  border-color: #4ecdc4; /* 青色边框 */
  background: rgba(255, 255, 255, 0.15); /* 更亮的半透明白色背景 */
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2); /* 青色阴影效果 */
}

/* 表单输入框和文本域占位符样式 */
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5); /* 半透明白色文字 */
}

/* 文本域特殊样式 */
.form-textarea {
  resize: vertical; /* 仅允许垂直调整大小 */
  min-height: 100px; /* 最小高度100px */
}

/* 弹窗底部区域 */
.modal-footer {
  display: flex; /* 弹性布局 */
  justify-content: flex-end; /* 右对齐 */
  gap: 15px; /* 子元素间距15px */
  padding: 20px 25px; /* 内边距20px上下，25px左右 */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部边框 */
}

/* 取消和保存按钮通用样式 */
.cancel-btn,
.save-btn {
  padding: 10px 20px; /* 内边距10px上下，20px左右 */
  border: none; /* 无边框 */
  border-radius: 6px; /* 圆角边框6px */
  font-size: 14px; /* 字体大小14px */
  font-weight: 500; /* 中等字重 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性0.3秒过渡动画 */
}

/* 取消按钮样式 */
.cancel-btn {
  background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
  color: white; /* 白色文字 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 半透明白色边框 */
}

/* 取消按钮悬停效果 */
.cancel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2); /* 更亮的半透明白色背景 */
}

/* 保存按钮样式 */
.save-btn {
  background: linear-gradient(45deg, #e8f4f8, #f0f8ff); /* 45度渐变背景 */
  color: #333; /* 深色文字 */
  border: 1px solid rgba(135, 206, 235, 0.3); /* 半透明蓝色边框 */
}

/* 保存按钮悬停效果 */
.save-btn:hover:not(:disabled) {
  background: linear-gradient(45deg, #d0e8f0, #e0f0ff); /* 悬停时渐变背景 */
  transform: translateY(-1px); /* 向上移动1px */
  box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3); /* 蓝色阴影效果 */
}

/* 按钮禁用状态 */
.cancel-btn:disabled,
.save-btn:disabled {
  opacity: 0.6; /* 透明度0.6 */
  cursor: not-allowed; /* 禁用鼠标指针 */
}

/* ==================== 响应式设计 ==================== */

/* 小屏幕适配 (最大宽度768px) */
@media (max-width: 768px) {
  .content-container {
    padding: 0 15px; /* 减少内边距为15px */
  }
  
  .hero-title {
    font-size: 2.5rem; /* 减小标题字体大小为2.5rem */
  }
  
  .hero-subtitle {
    font-size: 1.2rem; /* 减小副标题字体大小为1.2rem */
  }
  
  .modal-content {
    width: 95%; /* 弹窗宽度95% */
    margin: 20px; /* 外边距20px */
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 15px 20px; /* 减少内边距为15px上下，20px左右 */
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .features-grid,
  .character-grid,
  .stage-gallery,
  .media-grid {
    grid-template-columns: 1fr;
  }
  
  .news-item {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .video-thumbnail {
    width: 100px;
    height: 56px;
  }
}
</style>